<template>
	<view v-if="originalFlag === 1" class="container" style="min-height: 100vh;background: #fff;">
		<popup-active :visible.sync="showHonor" :popScreenList="popScreenList"></popup-active>
		<!-- <view class="title">{{ story.contentName }}</view> -->
		<view class="content" v-html="story.originalContent"></view>
		<view class="footer">
			<view class="care">
				<view class="img-view" v-if="dianzans == 1" @click="dianzan(2)">
					<image class="image" :src="thumbsImgYellow" mode="aspectFill"></image>
				</view>
				<view class="img-view" v-else @click="dianzan(1)">
					<image class="image" :src="thumbsImgHeart" mode="aspectFill"></image>
				</view>
				<text class="text">{{ giveLikeNum }}</text>
			</view>
		</view>
	</view>
	<web-view v-else :src="story.contentUrl"></web-view>
</template>

<script>
import http from '../../common/request.js';
import popupActive from '@/components/popup-activity/popup-activity.vue';
import {getCommonShareInfo} from '@/common/utils.js'
export default {
	onShareAppMessage() {
		return getCommonShareInfo()
	},
	components: {
		popupActive
	},
	data() {
		return {
			popScreenList: [],
			showHonor: false,
			id: '',
			story: {},
			originalFlag: 1,
			dianzans: 2,
			giveLikeNum: 0,
			thumbsImgHeart: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/card/zan.png',
			thumbsImgYellow: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/yellow.png'
		};
	},
	onLoad(option) {
		this.id = option.contentId;
	},
	mounted() {
		this.getDetails();
	},
	methods: {
		dianzan(num) {
			if (num == 1) {
				http('/api/sysContentLike/dataIncr', {
					method: 'post',
					data: {
						contentId: this.id
					}
				}).then(res => {
					this.dianzans = res.data.likeType;
					this.giveLikeNum = res.data.count;
					//todo 老田
					const list = res.data.popScreen || [];
					if (list.length > 0) {
						this.showHonor = true;
						this.popScreenList = list;
					}
				});
			} else {
				http('/api/sysContentLike/dataDecr', {
					method: 'post',
					data: {
						contentId: this.id
					}
				}).then(res => {
					this.dianzans = res.data.likeType;
					this.giveLikeNum = res.data.count;
					//todo 老田
					const list = res.data.popScreen || [];
					if (list.length > 0) {
						this.showHonor = true;
						this.popScreenList = list;
					}
				});
			}
		},
		getDetails() {
			http('/api/sysContentInfo/detail/' + this.id, {
				method: 'get'
			}).then(result => {
				if (result.code === 200) {
					const data = result.data || {};
					this.originalFlag = data.originalFlag;
					setTimeout(r => {
						this.story = data;
					}, 0);
					this.giveLikeNum = data.giveLikeNum;
					this.dianzans = data.likeType;
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
.container {
	padding: 0rpx 40rpx 40rpx 40rpx;
	background: #fff;
	.title {
		font-size: 30rpx;
		font-weight: 400;
		color: #66645d;
		line-height: 42rpx;
		text-align: center;
		margin-bottom: 24rpx;
		background: #fff;
		padding-top: 20rpx;
	}
	.content {
		font-size: 28rpx;
		font-weight: 300;
		color: #8a8c8d;
		line-height: 46rpx;
		img {
			margin: 24rpx 0;
		}
		margin-bottom: 24rpx;
	}
	.footer {
		display: flex;
		justify-content: flex-end;
		.care {
			display: inline-flex;
			align-items: center;
			justify-content: flex-end;
			.img-view {
				padding: 12rpx;
				line-height: 1;
				
				.image {
					width: 28rpx;
					height: 28rpx;
					vertical-align: top;
				}
			}
			.text {
				font-size: 24rpx;
				color: #b2b1ae;
			}
		}
	}
}
</style>
